<template>
    <div  :class="cname" class="pay-type-cnt clear-fix">
        <div @click="selectType" class="pay-cnt border-bottom clear-fix">
            <div class="pay-icon">
                <span class="icon iconfont icon-zhifubao1">&#xe628;</span>
            </div>
            <div class="pay-right">
                支付宝支付
            </div>
            <span :class="type == 0 ? 'icon-gouxuan' : 'icon-weigouxuan'" class="select-icon iconfont"></span>
        </div>
        <div @click="selectType" class="pay-cnt border-bottom clear-fix">
            <div class="pay-icon">
                <span class="icon iconfont icon-weixinzhifu2">&#xe628;</span>
            </div>
            <div class="pay-right">
                微信支付
            </div>
            <span :class="type == 0 ? 'icon-weigouxuan' : 'icon-gouxuan'" class="select-icon iconfont"></span>
        </div>
        <div class="deal-cnt" @click="greenDeal">
            <span :class="green ? 'icon-gouxuan' : 'icon-weigouxuan'" class="select-deal iconfont"></span>
            已阅读并同意<span>《用户服务协议》</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'payItemComponent',
    props: {
        cname: String
    },
    data ( ) {
        return {
            type: 0,
            green: false
        }
    },
    methods: {
        selectType ( ) {
            this.type = this.type == 0 ? 1 : 0
            this.$emit('paytypeSelected',{'payType': this.type, 'greenDeal': this.green})
        },
        greenDeal ( ) {
            this.green = !this.green
            this.$emit('paytypeSelected',{'payType': this.type, 'greenDeal': this.green})
        }
    }
}
</script>

<style lang="stylus" scoped>
.pay-type-cnt 
    width 100%
    height auto 
    .pay-cnt 
        width 100%
        height 45px
        line-height 45px 
        padding-left 45px
        box-sizing border-box
        position relative
        float left
        .pay-icon
            width 45px
            height 100%
            position absolute 
            left 0
            top 0
            font-size 16px
        .pay-right
            width 100%
            height 100%
            font-size 16px
            color #A7A7A7
        .select-icon 
            position absolute
            right 0
            top 0
            font-size 15px
.deal-cnt
    width 100%
    height 35px
    line-height 35px
    padding-left 25px
    box-sizing border-box
    font-size 12px
    float left
    position relative
    .select-deal
        font-size 13px
        position absolute
        left 0
        top 0
</style>
